<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../css/MyCourier.css">
    <script src="../../configure.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/main.css">

</head>
<body>
<div id="global">
    <div class="header">
        <div class="logo"><a href="" target="_blank" style="display: block;"><img src="../img/logo.png" alt=""></a></div>
        <div class="menu" style="height: 60px; line-height: 60px;font-size: 16px">
            <ul>
                <li><a href="../../user/html/HomePage.html">首页</a></li>
                <li><a href="../../user/html/booking_delivery.html">寄件服务</a></li>
                <li><a href="../../user/html/service.html">查询服务</a></li>
                <li><a href="MyShunda.html" id="my-topMenu-userCenter">个人中心</a> </li>
            </ul>
        </div>
        <div class="header-right" style="font-size: 16px;text-align: center">
            <div >
                <span>欢迎你，<i id="loginStatus"></i> &nbsp;</span>
                <span id="index-exit" class="cursor"><a href="../../user/html/login.html" id="exit">退出</a></span>
            </div>
        </div>
    </div>
    <div class="main-container">
        <div class="main_body">
            <div class="sidebar-container" >
                <ul class="sidebar-main" >
                    <li class="nav-top" ><img src="../img/left_menu_top.jpg"></li>

                    <li class="nav-item" ><a href="MyShunda.html" class>我的瞬达</a> </li>
                    <li class="nav-item" ><a href="MyCourier.html" class>我的快递</a> </li>

                    <li class="nav-item" ><a href="PersonalData.html" class>个人资料设置</a> </li>
                    <li class="nav-item" ><a href="Bind-account.html" class>账户绑定</a> </li>
                    <li class="nav-item" ><a href="RealNameInfo.html" class>实名信息</a> </li>
                    <li class="nav-bottom" ><img src="../img/left_menu_bottom.jpg"></li>
                </ul>
            </div>
            <div class="item-main-container" >
                <div class="app-main">
                <div class="el-header">
                    <div class="el-nav-scroll">
                        <div role="tablist" class="el-nav">
                            <div id="tab-first" aria-controls="pane-first"   class="el-tabs_item">我寄的</div>
                            <div id="tab-second" aria-controls="pane-second"   class="el-tabs_item">我收的</div>
                            <div  class="el-tabs_active"></div>
                        </div>
                    </div>
                </div>

                <div class="el-content">
                    <div id="pane-first" class="el-tab-pane" >
                        <div class="search-bar">
                            <em>我寄的查询:</em>
                            <div class="el-input el-input--prefix el-input--suffix">
                                <span class="el-input_prefix">
                                    <i class="el-input_icon"></i>
                                </span>
                                <input  type="search"   autocomplete="off" placeholder="请输入收件人电话号码、快递编号快速查找" maxlength="16" class="el-input_inner" id="searchInputSend">
                            </div>
                            <button type="button" class="el-button" id="selectSend">
                                <span>查询</span>
                            </button>
                        </div>

                        <div style="background-color:white; width: 100%;height: 500px;float: left;" class="el-table">
                                <table class="pageTable table table-striped"  style="height: 50px;width:100%;">
                                    <tr>
                                    <th>快递编号</th>
                                    <th>寄件人</th>
                                    <th>收件人</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                    </tr>
                                </table>
                        </div>
<!--                        <div class="page">-->
<!--                            <div class="el-pagination">-->
<!--                                <span class="el-pagination_total">共 n 条</span>-->
<!--                                <button type="button" disabled="" class="btn-prev">-->
<!--                                    <i class="el-icon"><</i>-->
<!--                                </button>-->
<!--                                <ul class="el-pager">-->
<!--                                    <li class="number">1</li>-->
<!--                                </ul>-->
<!--                                <button type="button" disabled="" class="btn-next">-->
<!--                                    <i class="el-icon"> > </i>-->
<!--                                </button>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>

                    <div id="pane-second" class="el-tab-pane" style="display: none; width: 100%">
                        <div class="search-bar">
                            <em>我收的查询:</em>
                            <div class="el-input el-input--prefix el-input--suffix">
                                <span class="el-input_prefix">
                                    <i class="el-input_icon"></i>
                                </span>
                                <input type="text" autocomplete="off" placeholder="请输入寄件人电话号码、快递编号快速查找" maxlength="16" class="el-input_inner" id="searchInputReceive">

                            </div>
                            <button type="button" class="el-button" id="selectReceive">
                                <span>查询</span>
                            </button>
                        </div>

                        <div style="background-color:white; width: 100%;height: 500px;float: left" class="el-table">
                            <table class="pageTable table table-striped" width="100%" style="height: 50px">
                                <tr>
                                    <th>快递编号</th>
                                    <th>寄件人</th>
                                    <th>收件人</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </table>
                        </div>



<!--                        <div class="page">-->
<!--                            <div class="el-pagination">-->
<!--                                <span class="el-pagination_total">共 n 条</span>-->
<!--                                <button type="button" disabled="" class="btn-prev">-->
<!--                                    <i class="el-icon"><</i>-->
<!--                                </button>-->
<!--                                <ul class="el-pager">-->
<!--                                    <li class="number">1</li>-->
<!--                                </ul>-->
<!--                                <button type="button" disabled="" class="btn-next">-->
<!--                                    <i class="el-icon"> > </i>-->
<!--                                </button>-->
<!--                            </div>-->
<!--                        </div>-->

                    </div>

                </div>
            </div>
            </div >
        </div>
    </div>
    <div class="foot">
        <div class="top">
            <div class="top-body">
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../../user/img/foot/outlets.svg">
                        </div>
                        &emsp;网点查询
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../../user/img/foot/service.svg">
                        </div>
                        &emsp;产品服务
                    </div>
                </div>
                <div class="middle">
                    <div class="href" style="margin-top: 30px;">
                        <div class="img">
                            <img src="../../user/img/foot/prescription.svg">
                        </div>
                        &emsp;运费时效
                    </div>
                    <div class="href">
                        <div class="img">
                            <img src="../../user/img/foot/prohibit.svg">
                        </div>
                        &emsp;禁寄物品
                    </div>
                    <div class="in">

                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/weixin.svg">
                    </div>
                    <div class="text">
                        &emsp;微信公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/qq.svg">
                    </div>
                    <div class="text">
                        &emsp;QQ公众号
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/alipay.svg">
                    </div>
                    <div class="text">
                        &emsp;支付宝服务窗
                    </div>
                </div>
                <div class="qr_code">
                    <div class="main">
                        <img src="../../user/img/foot/1.png" style="width: 100%;height: 100%;">
                    </div>
                    <div class="img">
                        <img src="../../user/img/foot/app.svg">
                    </div>
                    <div class="text">
                        &emsp;瞬达APP
                    </div>
                </div>
                <div class="interval">

                </div>
                <div class="logo">
                    <img src="../../user/img/foot/2.png">
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="text">
                瞬达快递 版权所有 <a href="#">沪ICP备13044869号</a>
            </div>

        </div>
    </div>
</div>

<!--订单详情 模态框-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">订单详情</h4>
            </div>
            <div class="modal-body">
                <div class="el-dialog__body">
                    <div class="info-box">
                        <div class="bar" style="text-align: center">
                            <p id="pageNum"></p>
                            <p id="status"></p>
                        </div>
                        <table cellpadding="0" cellspacing="1" class="table table-bordered">
                            <tr>
                                <td>寄件</td>
                                <td><h3 id="sNameAndPhone"></h3>
                                    <p id="sAddressAndDetailAddress"></p></td>
                            </tr>
                            <tr>
                                <td>收件</td>
                                <td><h3 id="rNameAndPhone"></h3>
                                    <p id="rAddressAndDetailAddress"></p></td>
                            </tr>
                            <tr>
                                <td>其他</td>
                                <td><p><i>下单时间：</i> <em id="createTime"></em></p></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" id="deleteOrder" data-target="#myModal2"
                        data-toggle="modal" style="">删除订单
                </button>
                <button type="button" class="btn btn-primary" id="sendAgain">再寄一单</button>
            </div>
        </div>
    </div>
</div>
<!--删除/取消订单 模态框 -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal2">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h2 class="modal-title">提示</h2>
            </div>
            <div class="modal-body">
                <img src="../../user/img/exclamationMark.svg" alt="" style="float: left"><h4 id="text"></h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                <button type="button" class="btn btn-primary" id="ensure">确定</button>
            </div>
        </div>
    </div>
</div>

<script src="../jquery/jquery-3.3.1.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/loginStatus.js"></script>
<script src="../js/MyCourier.js"></script>
<script src="../js/layer.js"></script>
<script src="../js/intercept.js"></script>
</body>
</html>